<!--登录-->
<template>
  <div class="login-main">
    <div class="logo-tit-view">
      <img
        src="../../assets/img/LOGOhome.png"
        alt=""
      >
      <span>枣庄市公安局{{ title }}</span>
    </div>
    <div class="login-view clearfix">
      <div class="float_left login-left">
        <div class="bg_view">
          <el-carousel
            :interval="10000"
            trigger="click"
            class="scroll-view-el"
          >
            <el-carousel-item
              v-for="(item,index) in imgs"
              :key="index"
            >
              <img
                class="bg_img"
                :src="item"
                alt=""
              >
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="float_left login-right right">
        <div class="r-c">
          <div class="welcome-div">
            <p class="welcome-text">
              Hi，欢迎您登录。
            </p>
            <span class="line"></span>
            <p class="welcome-tit">
              {{ title }}
            </p>
          </div>
          <div class="input-view">
            <el-form
              :model="login_form"
              status-icon
              :rules="rules"
              ref="login_form"
              label-width="0"
            >
              <el-form-item
                prop="user_name"
              >
                <div
                  class="input-li clearfix"
                  style="margin-bottom: 20px"
                >
                  <div class="float_left img-view user-img"></div>
                  <el-input
                    class="float_left input-el-li"
                    style="width: 220px"
                    placeholder="请输入用户名/手机号"
                    autocomplete="off"
                    @keyup.enter="loginSubmit"
                    v-model.trim="login_form.user_name"
                  ></el-input>
                </div>
              </el-form-item>
              <el-form-item
                prop="passWord"
              >
                <div class="input-li clearfix">
                  <div class="float_left img-view pass-img"></div>
                  <el-input
                    class="float_left input-el-li"
                    style="width: 220px"
                    type="password"
                    placeholder="请输入密码"
                    @keyup.enter="loginSubmit"
                    v-model.trim="login_form.passWord"
                  ></el-input>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <el-button
            :loading="loginSubmitTrue"
            @click="loginSubmit"
            class="login-button"
          >
            登录
          </el-button>
        </div>
      </div>
    </div>
    <div class="bottombanquan-view">
      <!--      Copyright ©️2006-2019 优鲜供应链有限公司版权所有-->
    </div>
  </div>
</template>

<script>
  const imgs = [
    require('@/assets/img/jbg.jpg')
  ]
  const imgsb = [
    'https://youxian-1251509844.cos.ap-beijing.myqcloud.com/login_bg1.png'
  ]
  export default {
    name: 'Login',
    created () {
      this.imgs = process.env.NODE_ENV === 'production' ? imgs : imgsb
    },
    data () {
      return {
        imgs: [],
        title: TITLE,
        loginSubmitTrue: false,
        rules: {
          user_name: [
            { required: true, message: '请输入用户名/手机号', trigger: 'blur' }
          ],
          passWord: [
            { required: true, message: '请输入登录密码', trigger: 'blur' }
          ]
        },
        login_form: {
          user_name: '',
          passWord: ''
        }
      }
    },
    methods: {
      // 登录提交
      async loginSubmit () {
        const { user_name: phone, passWord: password } = this.login_form
        if (!phone) {
          this.$message.error('请输入用户名')
          return
        }
        if (!password) {
          this.$message.error('请输入用户密码')
          return
        }
        const { data } = await this.$service.gzl.login({ phone, password })
        sessionStorage.setItem('user_info', JSON.stringify(data.data))
        const { err: errNode, data: dataNode } = await this.$service.gzl.getUserNodes()
        if (errNode) {
          sessionStorage.clear()
          return
        }
        console.log(dataNode)
        sessionStorage.setItem('nodes', JSON.stringify(dataNode.data))
        this.$router.push('/')
      }
    }
  }
</script>

<style>
  .input-li .el-input__inner {
    border: none;
    padding: 0
  }

  .login-left .el-carousel__container {
    height: 100%;
  }
</style>
<style scoped>
  .right {
    width: 45%;
    float: right;
    padding-top: 140px;
  }

  .r-c {
    max-width: 500px;
    margin: 0 auto;
  }

  .input-li {
    padding: 0 5px;
    border-bottom: 1px solid #ccc;
    width: 267px;
  }

  .input-li:hover {
    border-bottom: 1px solid #0755C3;
  }

  .input-li .img-view {
    transform: translateY(10px);
    width: 20px;
    height: 20px;
    margin-right: 12px;
    background: url("../../assets/img/ic-user.png");
    background-size: 20px 20px;
  }

  .input-li:hover .img-view {
    background: url("../../assets/img/ic-user-sel.png");
    background-size: 20px 20px;
  }

  .input-li .pass-img {
    transform: translateY(10px);
    width: 20px;
    height: 20px;
    background: url("../../assets/img/ic-psw.png");
    background-size: 20px 20px;
  }

  .input-li:hover .pass-img {
    background: url("../../assets/img/ic-psw_sel.png");
    background-size: 20px 20px;
  }

  .login-left {
    width: 55%;
    height: 100%;
  }

  .bg_view {
    height: 100%;
  }

  .scroll-view-el {
    height: 100%;
  }

  .input-view {
    /*border:1px solid red;*/
    margin-bottom: 68px;
    margin-top: 32px;
    padding-left: 99px;
  }

  .login-button {
    width: 272px;
    height: 42px;
    color: #fff;
    margin-left: 99px;
    font-size: 14px;
    background: #0755C3;
    border: 0 none;
    box-shadow: 2px 12px 14px 0px rgba(7, 85, 195, 0.4);
    cursor: pointer;
    border-radius: 0;
  }

  .login-button:hover {
    background: #177bff;
  }

  .welcome-div {
    padding-left: 100px;
  }

  .welcome-text {
    font-size: 20px;
    color: #2D405E;
    padding-bottom: 8px;
    font-weight: 600;
  }

  .welcome-div .line {
    display: block;
    margin-left: 3px;
    width: 16px;
    height: 2px;
    background: rgba(45, 64, 94, 1);
    border-radius: 1px;
    opacity: 0.5;
  }

  .welcome-tit {
    font-size: 12px;
    color: #2D405E;
    font-weight: 400;
    padding-top: 8px;
  }

  .login-view {
    position: fixed;
    top: 20%;
    left: 8%;
    width: 84%;
    height: 60%;
    background: #fff;
    box-shadow: 4px 4px 42px 0px rgba(92, 121, 176, 0.24);
    border-radius: 8px;
    /*background: rgba(255,255,255,.2);*/
  }

  .input-li-el {
    width: 90%;
  }

  .bg_img {
    width: 100%;
    height: 100%;
  }

  .logo-tit-view {
    position: fixed;
    top: 20px;
    left: 57px;
    line-height: 48px;
    color: #0755C3;
    font-size: 28px;
    font-weight: 400;
  }

  .logo-tit-view img {
    width: 48px;
    vertical-align: middle;
  }

  .oms-text {
    font-weight: 600;
  }

  .bottombanquan-view {
    position: fixed;
    text-align: center;
    width: 100%;
    left: 0;
    bottom: 20px;
    font-size: 14px;
    color: #979797;
    font-weight: 400;
  }
</style>
